<template>
  <zk-topBg paddingTop="30" :showBack="true" title="报损审核"></zk-topBg>
  <!-- 动态控制滚动穿透 -->
  <view class="main" style="padding-bottom: 0">
    <!-- 基本信息 -->
    <view class="cardBox" style="position: relative">
      <view class="title">基本信息</view>
      <view class="detailCard" style="width: 90%">
        <view class="dataList">
          <text class="label">报损单号</text>
          <text>{{ activeMaterials.Uuid }}</text>
          <image
            src="@/static/img/other/copy-g.png"
            mode="scaleToFill"
            @tap.stop="copyUuid" />
        </view>
        <view class="dataList">
          <text class="label">报损类型</text>
          <text>{{ activeMaterials.DamageTypeName }}</text>
        </view>
        <view class="dataList">
          <text class="label">报损日期</text>
          <text>{{ activeMaterials.DamageDate }}</text>
        </view>
        <view class="dataList">
          <text class="label">问题描述</text>
          <text>{{ activeMaterials.Problems }}</text>
        </view>
        <view class="dataList">
          <text class="label">解决方法</text>
          <text>{{ activeMaterials.Solutions }}</text>
        </view>
      </view>
      <view class="imgCard" v-if="addImg">
        <image :src="`${baseURL}/${addImg}`" class="addImg" mode="aspectFill" />
      </view>
      <image
        v-if="optionStatus != 'edit'"
        :src="`../../../../static/img/other/${
          stausImgUrl[activeMaterials.DamageReplyStatus]
        }.png`"
        class="stousImg"
        mode="scaleToFill" />
    </view>
    <!-- 审批流程 -->
    <view class="cardBox" v-if="optionStatus != 'edit'">
      <view class="title">审批流程</view>
      <view class="detailCard">
        <view
          class="dataList"
          style="margin-right: 180px"
          v-if="activeMaterials.DamageOperatorName">
          <text class="label">发起人</text>
          <text>{{ activeMaterials.DamageOperatorName }}</text>
        </view>
        <view
          class="dataList"
          style="margin-right: 150px"
          v-if="activeMaterials.DamageReplyerName">
          <text class="label">审批人</text>
          <text>{{ activeMaterials.DamageReplyerName }}</text>
        </view>
        <view
          class="dataList"
          style="margin-right: 150px"
          v-if="activeMaterials.DamageReplyStatusName">
          <text class="label">审批结果</text>
          <text :class="activeMaterials.DamageReplyStatus">{{
            activeMaterials.DamageReplyStatusName
          }}</text>
        </view>
        <view class="dataList" v-if="activeMaterials.DamageReplyMsg">
          <text class="label">审批意见</text>
          <text>{{ activeMaterials.DamageReplyMsg }}</text>
        </view>
      </view>
    </view>
    <view class="cardBox" v-else>
      <view class="title">审批流程</view>
      <view class="detailCard">
        <view class="dataListTwo" style="width: 180px">
          <text class="label">发起人</text>
          <text>{{ activeMaterials.DamageOperatorName }}</text>
        </view>
        <view class="dataListTwo">
          <text class="label mandatory">审批结果</text>
          <view class="btnCard">
            <view
              :class="
                changeButValue === 'CheckPass' ? 'resultBtnTwo' : 'resultBtnOne'
              "
              @tap.stop="setResultBtn('CheckPass')"
              >同意</view
            >
            <view
              :class="
                changeButValue === 'CheckFail' ? 'resultBtnTwo' : 'resultBtnOne'
              "
              @tap.stop="setResultBtn('CheckFail')"
              >不同意</view
            >
          </view>
        </view>
        <view class="dataListTwo">
          <text class="label">审批意见</text>
          <input
            type="text"
            placeholder="请输入审批意见"
            class="resultInput"
            v-model="resultValue" />
        </view>
      </view>
    </view>
    <!-- 物资信息 -->
    <view class="cardBox">
      <view class="title">物资信息</view>
      <view class="cardTitle">
        <view
          class="titleText"
          v-for="(item, index) in useLossReview.lossAddStatus"
          :key="index"
          :style="item.style">
          {{ item.text }}
        </view>
      </view>
      <scroll-view
        v-show="activeMaterials.Uuid"
        :scroll-y="true"
        class="cardList"
        style="height: 60px">
        <view class="listData">
          <view
            class="titleText"
            v-for="(item, index) in useLossReview.lossAddStatus"
            :key="index"
            :style="item.style">
            <text v-if="item.name === 'GoodsBatch'"
              >{{ activeMaterials[item.name] || "-" }}/{{
                activeMaterials["ExpirationDate"] || "-"
              }}</text
            >
            <text v-else>{{ activeMaterials[item.name] }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 底部按钮 -->
    <view class="divBut" v-if="optionStatus === 'edit'"></view>
    <view class="bottom" v-if="optionStatus === 'edit'">
      <view class="preserveBut" @tap.stop="goBack">返回</view>
      <view class="sumbitBut" @tap.stop="fromVerification">提交</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { baseURL } from "@/utils/api/http";
import { onLoad } from "@dcloudio/uni-app";
import { useLossReviewStore } from "@/stores/modules/lossReview";
import { useMemberStore } from "@/stores/modules/member";
const useLossReview = useLossReviewStore();
const useMember = useMemberStore();

onLoad((options) => {
  console.log(options);
  optionStatus.value = options?.status;
  if (options?.status === "details" || options?.status === "edit") {
    const instance: any = getCurrentInstance()?.proxy;
    const eventChannel = instance.getOpenerEventChannel();

    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on("channelData", function (data: AnyObject) {
      activeMaterials.value = data;
      addImg.value = data.DamageImg;
      // solution.value = data.Solutions
      // GoodsNumber.value = data.GoodsNumber
      if (data.CheckDate) datetimesingle.value = data.CheckDate;
    });
  }
});

const formatDate = (timestamp: number) => {
  let date = new Date(timestamp);
  let year = date.getFullYear();
  let month = (date.getMonth() + 1).toString().padStart(2, "0");
  let day = date.getDate().toString().padStart(2, "0");
  return `${year}-${month}-${day}`;
}; // 时间戳修改为xxxx-xx-xx格式

let optionStatus = ref(""); // 保存进入的状态（details：详情，edit：编辑，newAddition：新增）
let datetimesingle = ref(formatDate(Date.now())); // 选择日期
let addImg = ref(""); // 图片链接
// let solution = ref('')// 解决方法
let activeMaterials: AnyObject = ref({}); // 选中物资
// let GoodsNumber = ref(0)// 报损物资数量
let changeButValue = ref("CheckPass"); // 审批结果
let resultValue = ref("通过"); // 审批意见
let stausImgUrl: any = {
  CheckNot: "approval-pending",
  CheckPass: "approval-passed",
  CheckFail: "approval-nopassed",
}; // 显示审核状态的图片名

const uploadImg = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    success: function (res) {
      const tempFilePaths = res.tempFilePaths;
      uni.uploadFile({
        url: `${baseURL}/api/fileUpImg`, //仅为示例，非真实的接口地址
        filePath: tempFilePaths[0],
        name: "file",
        success: (uploadFileRes) => {
          let res = JSON.parse(uploadFileRes.data);
          addImg.value = res.files[0];
        },
      });
    },
  });
}; // 上传图片

const setResultBtn = (e: string) => {
  changeButValue.value = e;
  resultValue.value = e === "CheckPass" ? "审核通过" : "审核不通过";
};

// onMounted(async () => {
//   // 获取物资数据
//   let data = {
//     GodownCode: useMember.GodownCode,
//     pageNum: 1,
//     pageSize: 10,
//     searchParam: "",
//   }
//   let res = await useLossReview.getSupplies(data)
//   useLossReview.lossAddList = res?.data.list
// })

// let popup: any = ref(null)// 获取组件实例
// const popupOpen = () => {
//   popup.value.open()
// }// 弹出层

// let popupShow = ref(false)
// const popupChange = (e: any) => {
//   popupShow.value = e.show ? true : false
// }// 弹窗弹出时禁止页面滚动

// let popupPageNum = 1// 当前页
// let popupCurrPage = 1// 总页数
// let popupPromptMsg = ref('加载中...')
// let seachText = ref('')
// const popupGetData = async (mode?: any) => {
//   popupPageNum++
//   if (mode === 'seach') { popupPageNum = 1 }
//   if (popupPageNum > popupCurrPage) {
//     popupPromptMsg.value = '到底了'
//     return
//   }
//   popupPromptMsg.value = '加载中...'
//   // 获取物资数据
//   let data = {
//     GodownCode: useMember.GodownCode,
//     pageNum: popupPageNum,
//     pageSize: 10,
//     searchParam: seachText.value,
//   }
//   let res = await useLossReview.getSupplies(data)
//   if (popupPageNum === 1) {
//     useLossReview.lossAddList = res?.data.list
//   } else {
//     useLossReview.lossAddList.push(res?.data.list)
//   }
//   if (!res?.data.list.length) {
//     popupPromptMsg.value = '暂无数据'
//   } else {
//     popupPromptMsg.value = '加载完成'
//   }
//   popupCurrPage = res?.data.currPage
// }// 弹窗触底加载或搜索请求更多数据

// const formatTimestamp = (timestamp: number) => {
//   let date = new Date(timestamp);
//   let year = date.getFullYear();
//   let month = (date.getMonth() + 1).toString().padStart(2, '0');
//   let day = date.getDate().toString().padStart(2, '0');
//   let hours = date.getHours().toString().padStart(2, '0');
//   let minutes = date.getMinutes().toString().padStart(2, '0');
//   let seconds = date.getSeconds().toString().padStart(2, '0');
//   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
// }// 时间戳处理函数

const errorPrompt = (text: string) => {
  uni.showToast({
    title: text,
    icon: "error",
    duration: 1500,
  });
}; // 错误提示

const fromVerification = () => {
  let data = {
    DamageReplyMsg: resultValue.value,
    DamageReplyStatus: changeButValue.value,
    DamageReplyer: useMember.profile.StaffCode,
    GodownCode: useMember.GodownCode,
    Uuid: activeMaterials.value.Uuid,
  };
  useLossReview.modifySumbit(data);
}; // 保存或提交时的表单验证

const copyUuid = () => {
  uni.setClipboardData({ data: activeMaterials.value.Uuid });
};

const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  z-index: 1;
  padding-bottom: 96px;

  .cardBox {
    width: 870px;
    margin: 16px auto 0;
    padding: 20px;
    border-radius: 10px;
    background: rgb(255, 255, 255);

    .topTitle {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .titleBtn {
        display: flex;
        justify-content: space-between;
        width: 94px;
        height: 46px;
        padding: 0px 15px;
        font-size: 12px;
        line-height: 46px;
        color: #ffffff;
        background-color: #08121e;
        border-radius: 8px;
      }

      .titleBtnTwo {
        display: flex;
        justify-content: space-between;
        width: 94px;
        height: 46px;
        padding: 0px 15px;
        font-size: 12px;
        line-height: 46px;
        color: #ccccd3;
        background-color: #f2f3f4;
        border-radius: 8px;
      }
    }

    .title {
      display: flex;
      align-items: center;
      color: #2c8a66;
      font-size: 18px;
      line-height: 26px;
    }

    .title::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 11px;
      border-radius: 2px;
      background: #2c8a66;
    }

    .fromTop {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .leftFrom {
        display: grid;
        justify-content: space-between;
        grid-template-columns: 1fr 1fr;
        width: 422px;

        .inputTitle {
          line-height: 40px;
          font-size: 16px;
          font-weight: 400;
        }

        .mandatory::after {
          content: "*";
          margin-left: 2px;
          color: #f73b4a;
        }

        .selectCard {
          margin-top: 10px;

          .selectStyle {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 2px;
            width: 200px;
            height: 46px;
            border: 1px solid #e4e4e4;
            border-radius: 10px;
          }
        }

        .inputCard {
          margin-top: 10px;
          grid-column: 1 / span 2;

          .input {
            box-sizing: border-box;
            width: 100%;
            height: 46px;
            padding: 0 12px;
            font-size: 14px;
            border: 1px solid #e4e4e4;
            border-radius: 10px;
          }

          .input-placeholder {
            color: #ccccd3;
          }
        }
      }

      .rightFrom {
        margin-top: 40px;

        .imgCard {
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          width: 392px;
          height: 248px;
          border: 1px dashed #e4e4e4;
          border-radius: 10px;
          background: #f1f4f3;

          .addImg {
            width: 392px;
            height: 248px;
            border-radius: 10px;
          }

          .imgIcon {
            width: 43px;
            height: 43px;
          }
        }
      }
    }

    .inputLoss {
      width: 60px;
      height: 35px;
      margin: auto;
      padding: 0px 12px;
      font-size: 13px;
      border-radius: 8px;
      border: 1px solid #e4e4e4;
    }

    .inputLoss-placeholder {
      color: #ccccd3;
    }

    .cardList {
      width: 100%;
      height: 220px;
      font-size: 14px;

      .listData {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 0 12px;

        .titleText {
          text-align: center;
        }
      }
    }

    .nullData {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 220px;

      .nullImg {
        width: 172px;
        height: 172px;
        margin: 16px;
      }

      text {
        font-size: 14px;
        color: #ccccd3;
      }
    }

    .detailCard {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      width: 100%;

      .dataList {
        display: flex;
        align-items: center;
        line-height: 32px;
        font-size: 14px;
        margin-right: 32px;

        .label {
          color: #adafb8;
          margin-right: 10px;
        }

        image {
          width: 14px;
          height: 14px;
          margin-left: 12px;
        }

        .CheckNot {
          color: #efa022;
        }

        .CheckPass {
          color: #32966f;
        }

        .CheckFail {
          color: #f73b4a;
        }
      }

      .dataListTwo {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 96px;
        margin-right: 36px;

        .label {
          color: #adafb8;
          font-size: 16px;
          color: #08121e;
        }

        text {
          font-size: 14px;
          color: #08121e;
        }

        .mandatory::after {
          content: "*";
          color: #f73b4a;
        }

        .btnCard {
          display: flex;

          .resultBtnOne {
            padding: 10px 18px;
            border: 1px solid #e4e4e4;
            border-radius: 4px;
            text-align: center;
            font-size: 14px;
            // color: #E4E4E4;
            margin-right: 12px;
          }

          .resultBtnTwo {
            padding: 10px 18px;
            border: 1px solid rgb(50, 150, 111);
            border-radius: 4px;
            text-align: center;
            font-size: 14px;
            color: #32966f;
            margin-right: 12px;
          }
        }

        .resultInput {
          width: 344px;
          height: 46px;
          font-size: 12px;
          padding: 0 12px;
          border: 1px solid rgb(228, 228, 228);
          border-radius: 10px;
        }
      }
    }

    .imgCard {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 392px;
      height: 248px;
      margin: 20px 0;
      border: 1px dashed #e4e4e4;
      border-radius: 10px;
      background: #f1f4f3;

      .addImg {
        width: 392px;
        height: 248px;
        border-radius: 10px;
      }

      .imgIcon {
        width: 43px;
        height: 43px;
      }
    }

    .stousImg {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 88px;
      height: 88px;
    }
  }
}

.divBut {
  width: 100%;
  height: 96px;
}

.bottom {
  position: fixed;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 72px;
  font-size: 15px;
  box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;

  .preserveBut {
    width: 104px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    margin-right: 12px;
    background: #eeeeee;
  }

  .sumbitBut {
    width: 464px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    border-radius: 10px;
    margin-right: 12px;
    background: #32966f;
  }
}

.popup {
  position: relative;
  width: 596px;
  height: 480px;
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
  padding: 20px 20px 0;
  background-color: #ffffff;

  .popupTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 30px;

    text {
      font-size: 18px;
    }

    image {
      width: 27px;
      height: 27px;
    }
  }

  .seachCard {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 550px;
    margin: 10px auto 0;
    height: 46px;
    border: 1px solid rgb(220, 223, 230);
    border-radius: 10px;
  }

  .seizeASeatDiv {
    width: 100%;
    height: 110px;
    line-height: 26px;
    text-align: center;
    font-size: 12px;
    color: #ccccd3;
  }

  .popupBtn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #ffffff;

    view {
      width: 364px;
      height: 54px;
      line-height: 54px;
      text-align: center;
      color: #ffffff;
      background-color: #32966f;
      border-radius: 10px;
      font-size: 16px;
    }
  }
}

.cardTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
  color: #adafb8;
  margin-top: 16px;
  background-color: #f2f3f4;

  .titleText {
    text-align: center;
  }
}

.cardList {
  width: 100%;
  height: 220px;
  font-size: 14px;

  .listData {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0 12px;

    .titleText {
      text-align: center;
    }
  }
}

::v-deep.uni-select__input-text {
  font-size: 14px;
  color: #08121e;
}

::v-deep.uni-select__input-placeholder {
  font-size: 14px;
  color: #ccccd3;
}

::v-deep.uni-select {
  border: none;
  border-radius: 2px;
}

::v-deep.zk_btn .text {
  margin: 0 2px !important;
}

::v-deep .fs_16 {
  font-size: 14px;
}

::v-deep.uni-date-x--border {
  border: none;
}

::v-deep .uni-date-x {
  height: 46px;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  color: #000000;

  .icon-calendar {
    display: none;
  }

  .uni-date__x-input {
    padding-left: 12px;
  }
}
</style>
